<template>
  <div class="all" :style="'height :' + windowHeight + 'px'">
    <div class="card">
      <div class="cricle"></div>
      <div class="content">
        <h2>Pepsi Cola</h2>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis
          aliasofficiis consequatur officia reiciendis , neque harum qui
          voluptatem.
        </p>
        <a href="#">Buy Now</a>
      </div>
      <img src="../../../assets/img/kele.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},

  mounted() {
    //打印窗口大小
    let h = document.body.clientHeight

    this.windowHeight = h - 95
    console.log('高度:' + h)
  },
  data() {
    return {
      windowHeight: 0
    }
  }
}
</script>

<style lang="less" scoped>
.all {
  display: flex;
  align-content: center;
  justify-content: center;
  min-height: 83vh;
  align-items: center;
}

.card {
  position: relative;
  width: 600px;
  height: 300px;
  border-radius: 20px;

  display: flex;
  align-items: center;

  transition: 0.5s;
}

.card .cricle {
  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  border-radius: 20px;
  overflow: hidden;
}

.card .cricle::before {
  content: '';
  position: absolute;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: #d83133;

  // clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
  clip-path: circle(120px at center);
  transition: 0.5s;
}

.card:hover .cricle:before {
  background-color: #0065c3;
  clip-path: circle(400px at center);
}

.card img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 300px;

  // pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target
  pointer-events: none;
  transition: 0.5s;
}

.card:hover img {
  left: 72%;
  height: 500px;
}

.card .content {
  position: relative;
  width: 50%;
  left: 20%;
  padding: 20px 20px 20px 40px;
  transition: 0.5s;

  // opacity属性指定了一个元素的不透明度。
  opacity: 0;
  // CSS属性 visibility 显示或隐藏元素而不更改文档的布局
  visibility: hidden;
}

.card:hover .content {
  left: 0;
  opacity: 1;
  visibility: visible;
}

.card .content h2 {
  color: #fff;
  // text-transform CSS属性指定如何将元素的文本大写。 uppercase 这个关键字强制所有字符被转换为大写。

  text-transform: uppercase;
  font-size: 2em;
  line-height: 1em;

  margin-bottom: 5px;
}

.card .content p {
  color: #fff;
}

.card .content a {
  position: relative;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  background: #fff;
  color: #111;

  margin-top: 10px;
  display: inline-block;

  // text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线  或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。
  text-decoration: none;
  font-weight: 700;
}

@media (max-width: 991px) {
  .card {
    width: auto;
    max-width: 350px;
    align-items: flex-start;
    margin-top: 10px;
  }

  .card:hover {
    height: 600px;
  }

  .card .content {
    width: 100%;
    left: 0;
    padding: 30px;
  }

  .card:hover img {
    top: 73%;
    left: 50%;
    height: 300px;
  }
}
</style>
